<%@page import="com.nebula.util.FileUtil"%>
<%@page import="com.nebula.common.Const"%>
<%@page import="com.nebula.pojo.User"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
	User user = (User)session.getAttribute(Const.USERINFO);
 %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<title>文件上传</title>
  	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/webuploader/0.1.5/webuploader.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/Hui-iconfont/1.0.8/iconfont.css" />
	
	<style type="text/css">
	table tbody {
	    display:block;
	    height:460px;
	    overflow-y:auto;
	}
	table thead, tbody tr {
	    display:table;
	    width:100%;
	    table-layout:fixed;
	}
	
	table thead {
	    width: calc( 100% - 1em )
	}
	
	.btns{
		margin-left: 10px;
	}
	</style>
  </head>
  
  <body>
  	<input type="hidden" id="singleFileSize" value=<%=user.getUserGroups().getMaxFileSize()%>>
  	<input type="hidden" id="size" value=<%=FileUtil.unreservedDecimalPoint(user.getUserGroups().getMaxFileSize())%>>
  	<input type="hidden" id="groupname" value=<%=user.getUserGroups().getGroupname()%>>
  	<input type="hidden" id="folderName" value=<%=request.getAttribute("folderName")%>>
  	<input type="hidden" id="folderId" value=<%=request.getAttribute("folderId")%>>
  	<div id="uploader" class="formControls">
	    <div class="uploader-thum-container">
	    	 <!--用来存放文件信息-->
	    	<div class="uploader-list">
	    		<table class="table table-border table-responsive">
					<thead>
						<tr class="text-c">
							<th>文件名</th>
							<th>大小</th>
							<th>上传目录</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="fileList"></tbody>
				</table>
	    	</div>
	    	<br>
	        <div class="btns">
	        	<div id="filePicker">选择文件</div>&nbsp;
	      		<button id="ctlBtn" class="btn btn-default btn-uploadstar radius ml-10">开始上传</button>
	      		<button id="closeBtn" class="btn btn-default btn-uploadstar radius ml-10">关闭窗口</button>
	        </div>
	    </div>
	</div>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/1.9.1/jquery.min.js"></script>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/static/webuploader/0.1.5/webuploader.min.js"></script>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/static/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/h-ui/js/H-ui.min.js"></script> 
	<script type="text/javascript" src="${pageContext.request.contextPath}/static/h-ui.admin/js/H-ui.admin.js"></script>
  	<script type="text/javascript">
  		var GUID = WebUploader.Base.guid();
  		var index = parent.layer.getFrameIndex(window.name);
  		$(function(){
  			$list = $("#fileList"),
  			$btn = $("#ctlBtn"),
  			$closeBtn = $("#closeBtn");
			state = "pending",
			num = 0,
			i = 0,
			uploader;
  			var uploader = WebUploader.create({
  				auto:true,
  				
				swf: 'static/webuploader/0.1.5/Uploader.swf',
				
				//prepareNextFile:true,
				
				// 文件接收服务端。
				server: '/nebula/file/fileUpload.action',
				
				chunked: true,
				
				chunkSize:52428800,
				
				chunkRetry:false,
				
				fileSingleSizeLimit:$("#singleFileSize").val(),
				
				threads : 1,
				
				duplicate:true,
				
				formData: {
					guid : GUID,
					folderId : $("#folderId").val()
				},
				
				// 选择文件的按钮。可选。
				// 内部根据当前运行是创建，可能是input元素，也可能是flash.
				pick: '#filePicker',
			
				// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
				resize: false,
				
			});
			// 当有文件被添加进队列的时候
			uploader.on( 'fileQueued', function( file ) {
				$list.append('<tr class="text-c" id="'+ file.id +'">'+
				'<td>'+ file.name +'</td>' + '<td>'+ WebUploader.formatSize( file.size, 0, ['B', 'KB', 'MB', 'GB'] ) +'</td>' +
				'<td>'+$("#folderName").val()+'</td>' + '<td class="progress-td"><p class="state">排队中...</p></td>'
				+'<td><a style="text-decoration:none" href="javascript:;" title="删除" id="del">'
				+'<i class="Hui-iconfont" style="font-size:16px" id="del">&#xe60b;</i></a></td>' 
				+'</tr>');
				num++;
				$list.on('click','.Hui-iconfont',function(){
					if($(this).parent().parent().parent().attr('id') == file.id){
						/* if($(this).attr('id') == "start"){
							uploader.upload($(this).parent().parent().parent().attr('id'));
						}else if($(this).attr('id') == "delete"){
							uploader.stop(true);
						} */
						uploader.removeFile(file.id,true);
						$(this).parent().parent().parent().remove();
						num--;
					}
					if(num === 0){
						parent.layer.close(index);
					}
				});
			});
			// 文件上传过程中创建进度条实时显示。
			uploader.on( 'uploadProgress', function(file , percentage) {
			     var $li = $( '#'+file.id );
			
			    $li.find('p.state').text((percentage*100).toFixed(2) + '%');
			});
			
			uploader.on('uploadAccept',function(file,data){
				if(data.status == 0){
					return true;
				}else if(data.status == 1){
					return false;
				}
			});
			
			// 文件上传成功，给item添加成功class, 用样式标记上传成功。
			uploader.on( 'uploadSuccess', function( file) {
				$( '#'+file.id ).addClass('upload-state-success').find(".state").text("已上传");
			});
			
			// 文件上传失败，显示上传出错。
			uploader.on( 'uploadError', function(file) {
				$( '#'+file.id ).addClass('upload-state-error').find(".state").text("上传出错");
			});
			
			uploader.on('error',function(type){
				if(type == "F_EXCEED_SIZE") {
					var size = $("#size").val();
					layer.msg($("#groupname").val()+"上传的单个文件大小最多为"+size);
				}
			});
			
			// 完成上传完了，成功或者失败，先删除进度条。
			/* uploader.on( 'uploadComplete', function( file ) {
				$( '#'+file.id ).find('.progress').fadeOut();
			}); */
			uploader.on('all', function (type) {
		        if (type === 'startUpload') {
		            state = 'uploading';
		        } else if (type === 'stopUpload') {
		            state = 'paused';
		        } else if (type === 'uploadFinished') {
		            state = 'done';
		        }
		
		        if (state === 'uploading') {
		            $btn.text('暂停上传');
		        } else {
		            $btn.text('开始上传');
		        }
		    });
		
			$btn.on('click', function () {
		        if (state === 'uploading') {
		            uploader.stop(true);
		        } else {
		            uploader.upload();
		        }
		    });
		    
		    $closeBtn.on('click',function(){
		    	if(state === 'uploading' || state === 'paused'){
		    		layer.confirm('列表中有未上传完成的文件，确定要放弃上传吗？',{title:'放弃上传'},function(){
		    			uploader.stop(true);
		    			parent.layer.close(index);
		    		});
		    	}else{
		    		window.parent.location.reload();
		    		parent.layer.close(index);
		    	}
		    });
  		});
  	</script>
  </body>
</html>
